<template>
  <div class="query">
    <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
      <el-form
        :inline="true"
        :model="filterField"
        ref="formData"
        :rules="rules"
      >
        <div class="queryTitle">项目范围</div>
        <el-form-item label="所属区域">
          <el-cascader
            ref="manageArea"
            v-model="areaId"
            :options="areasOptions"
            @change="getAreaId"
            clearable
            filterable
            :props="{ checkStrictly: true }"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="行业">
          <el-select
            placeholder="请选择"
            clearable
            v-model="filterField.industryId"
          >
            <el-option
              v-for="item in industryOptions"
              :key="item.code"
              :label="item.name"
              :value="item.code"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="项目状态">
          <el-select
            placeholder="请选择"
            clearable
            v-model="filterField.status"
          >
            <el-option
              v-for="item in statusOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="投资类型">
          <el-select
            placeholder="请选择"
            clearable
            v-model="filterField.investment"
          >
            <el-option
              v-for="item in investmentOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工程造价" class="projectPrice" prop="randowPrice">
          <el-input
            v-model="filterField.totalStart"
            placeholder="请输入"
            style="width: 100px"
          ></el-input>
          <span>至</span>
          <el-input
            v-model="filterField.totalEnd"
            placeholder="请输入"
            style="width: 100px"
          ></el-input>
          <span>万元</span>
        </el-form-item>
        <el-form-item label="开工日期">
          <timeSelection
            :pickerOptions="pickerOptions1"
            @getStartTimeValue="getbeginDateStart"
            @getEndTimeValue="getbeginDateEnd"
            :startTime="startTimeValueTwo"
            :endTime="endTimeValueTwo"
          ></timeSelection>
        </el-form-item>
        <el-form-item label="建档日期">
          <timeSelection
            :pickerOptions="pickerOptions1"
            @getStartTimeValue="getarchiveDateStart"
            @getEndTimeValue="getarchiveDateEnd"
            :startTime="startTimeValue"
            :endTime="endTimeValue"
          ></timeSelection>
        </el-form-item>
        <div class="queryTitle">月度范围</div>
        <el-col
          :span="24"
          class="subFormItem"
          style="color: #666; font-size: 14px; line-height: 36px"
        >
          <el-form-item
            label="所选项目范围内，在"
            label-width="140px"
            prop="monthsStart"
            class="monthQuery noRequiredTip"
          >
            <el-date-picker
              v-model="filterField.monthsStart"
              type="month"
              value-format="yyyy-MM"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
            <!-- 至 -->
          </el-form-item>
          <el-form-item
            label="至"
            label-width="25px"
            prop="monthsEnd"
            class="monthQuery noRequiredTip"
          >
            <el-date-picker
              v-model="filterField.monthsEnd"
              type="month"
              value-format="yyyy-MM"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item
            label-width="240px"
            :label="`这${monthNumber}个月内，落实了代发工资的月数`"
            class="monthQuery"
          >
            <el-select v-model="filterField.issueSymbol">
              <!-- <el-option value=">=" label="≥"></el-option>
                            <el-option value="<=" label="≤"></el-option>
                            <el-option value="=" label="＝"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item
            class="monthQuery"
            label=""
            style="width: 120px"
            prop="count"
          >
            <el-input
              v-model="filterField.count"
              type="number"
              style="width: 120px"
            ></el-input>
          </el-form-item>
          的项目
          <el-form-item label="">
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchList"
              class="searchBtn"
            >
              <span>搜索</span>
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
  </div>
</template>
<script>
import { mapState, mapActions } from 'vuex'
export default {
  data() {
    var checkStartMonth = (rule, value, callback) => {
      if (value && this.filterField.monthsEnd) {
        let start = value
        let end = this.filterField.monthsEnd
        if (end && start.substring(0, 4) !== end.substring(0, 4)) {
          callback(new Error('必须选择同一年的月份'))
        } else {
          if (!(start.substring(5, 7) * 1 > end.substring(5, 7) * 1)) {
            this.$refs.formData.clearValidate('monthsEnd')
            this.$refs.formData.clearValidate('count')
            this.filterField.count =
              this.filterField.count > this.monthNumber
                ? this.monthNumber
                : this.filterField.count
            callback()
          } else {
            callback(new Error('开始月份不能大于结束月份'))
          }
        }
      } else {
        callback(new Error('请选择月度起始与终止范围'))
      }
    }
    var checkEndMonth = (rule, value, callback) => {
      if (value && this.filterField.monthsStart) {
        let start = this.filterField.monthsStart
        let end = value
        if (start && start.substring(0, 4) !== end.substring(0, 4)) {
          callback(new Error('必须选择同一年的月份'))
        } else {
          if (!(start.substring(5, 7) * 1 > end.substring(5, 7) * 1)) {
            this.$refs.formData.clearValidate('monthsStart')
            this.$refs.formData.clearValidate('count')
            this.filterField.count =
              this.filterField.count > this.monthNumber
                ? this.monthNumber
                : this.filterField.count
            callback()
          } else {
            callback(new Error('开始月份不能大于结束月份'))
          }
        }
      } else {
        callback(new Error('请选择月度起始与终止范围'))
      }
    }
    var checkPrice = (rule, value, callback) => {
      const { totalStart, totalEnd } = this.filterField
      if (totalStart || totalEnd) {
        const reg = /^[\+]?(([1-9]\d*)|\d)$/
        if (
          (totalStart && !reg.test(totalStart)) ||
          (totalEnd && !reg.test(totalEnd))
        ) {
          callback(new Error('工程造价区间必须为大于等于0的整数'))
        } else {
          if (totalStart && totalEnd) {
            if (totalStart * 1 >= totalEnd * 1) {
              callback(new Error('后面的区间必须大于前面的区间'))
            } else {
              callback()
            }
          } else {
            callback()
          }
        }
      } else {
        callback()
      }
    }
    var checkCount = (rule, value, callback) => {
      var regu = /^([0]|[1-9][0-9]*)$/
      if (value != '') {
        if (!regu.test(value)) {
          callback(new Error('请输入大于或等于0的整数'))
        } else {
          if (value > this.monthNumber) {
            callback(new Error('不能大于选择的月度范围'))
          } else {
            callback()
          }
        }
      } else {
        callback(new Error('请输入大于或等于0的整数'))
      }
    }
    return {
      pickerOptions: {
        disabledDate(time) {
          return !(
            (time.getMonth() <= new Date().getMonth() &&
              time.getFullYear() == new Date().getFullYear()) ||
            time.getFullYear() < new Date().getFullYear()
          ) // 注意是 || 不是 && 哦
        },
      },
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() //如果没有后面的-8.64e7就是不可以选择今天的
        },
      },
      areaId: '',
      value1: [],
      filterField: {
        areaId: '',
        industryId: '',
        investment: '',
        totalStart: '',
        totalEnd: '',
        archiveDateStart: '',
        archiveDateEnd: '',
        beginDateStart: '',
        beginDateEnd: '',
        status: 'STARTED',
        monthsStart: '',
        monthsEnd: '',
        issueSymbol: '=',
        count: '1',
        year: '',
        months: '',
      },
      rules: {
        monthsStart: [
          { required: true, validator: checkStartMonth, trigger: 'blur' },
        ],
        monthsEnd: [
          { required: true, validator: checkEndMonth, trigger: 'blur' },
        ],
        randowPrice: [{ validator: checkPrice, trigger: 'blur' }],
        count: [{ required: true, validator: checkCount, trigger: 'blur' }],
      },
    }
  },
  mounted() {
    this.getInvestmenttype()
    this.getStatus()
    this.getIndustry()
    this.getAreas({ areaId: this.$store.state.areaInfoArr.areaId })
    let curMonth = new Date().getMonth() + 1
    let curYear = new Date().getFullYear()
    let newDate = ''
    if (curMonth == 1) {
      newDate = curYear - 1 + '-' + 11
    } else if (curMonth == 2) {
      newDate = curYear - 1 + '-' + 12
    } else {
      newDate = curYear + '-' + (curMonth - 2)
    }
    this.filterField.monthsStart = newDate
    this.filterField.monthsEnd = newDate
  },
  computed: {
    ...mapState([
      'investmentOptions',
      'statusOptions',
      'areasOptions',
      'industryOptions',
    ]),
    monthNumber() {
      let start = this.filterField.monthsStart
      let end = this.filterField.monthsEnd
      if (start && end) {
        return end.substring(5, 7) * 1 - start.substring(5, 7) * 1 >= 0
          ? end.substring(5, 7) * 1 - start.substring(5, 7) * 1 + 1
          : 1
      }
      return 1
    },
  },
  methods: {
    ...mapActions([
      'getInvestmenttype',
      'getStatus',
      'getAreas',
      'getIndustry',
    ]),
    getMonthRandom(val) {
      if (val) {
        this.filterField.monthsStart = val[0]
        this.filterField.monthsEnd = val[1]
      } else {
        this.filterField.monthsStart = ''
        this.filterField.monthsEnd = ''
      }
    },
    getAreaId() {
      var areaId = this.areaId[this.areaId.length - 1]
      this.filterField.areaId = areaId
    },
    searchList() {
      this.$refs.formData.validate((flag) => {
        if (flag) {
          this.$emit('callback', this.filterField)
        }
      })
    },

    //获取开工日期
    getbeginDateStart(val) {
      this.filterField.beginDateStart = val
    },
    getbeginDateEnd(val) {
      this.filterField.beginDateEnd = val
    },
    //建档日期
    getarchiveDateStart(val) {
      this.filterField.archiveDateStart = val
    },
    getarchiveDateEnd(val) {
      this.filterField.archiveDateEnd = val
    },
  },
}
</script>
<style lang="less" scoped>
.query {
  padding: 0 24px;
  border-bottom: 10px solid #f5f7fa;
  &Title {
    line-height: 16px;
    font-size: 16px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
  }
  /deep/.el-form-item {
    width: 338px;
    margin-right: 30px;
    .el-input__inner {
      width: 268px;
    }
    .el-form-item__label {
      width: 70px;
    }
  }
  .subFormItem {
    /deep/ .el-form-item {
      width: auto;
    }
  }
  /deep/.projectPrice {
    .el-input__inner {
      width: 100px;
    }
  }
  &Last {
    line-height: 36px;
    color: #666;
    font-size: 14px;
    margin-bottom: 24px;
  }
  /deep/.timeBox {
    width: 268px;
    .el-input__inner {
      width: 120px !important;
    }
  }
}
/deep/.monthQuery {
  margin-right: 0 !important;
  .el-input__inner {
    width: 120px !important;
  }
  .el-date-editor {
    width: 130px;
  }
}
/deep/.noRequiredTip {
  .el-form-item__label:before {
    display: none;
  }
  .el-form-item__error {
    width: 146px;
  }
}
@import '../../../static/css/filterArea.less';
</style>
